<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <div style="position: absolute;"><canvas width="80" height="80"></canvas></div>
    <script>
        //获取画布元素
        var canvas = document.getElementsByTagName('canvas')[0];
        //创建画布
        var cxt = canvas.getContext('2d');
        //画表盘
        //一个函数抱起来
        function clock (){
            //清除之前的指针
            cxt.clearRect(0,0,80,80);
            cxt.beginPath();
            cxt.arc(40,40,35,0,2*Math.PI);
            cxt.lineWidth = 2;
            cxt.color = 'red';
            cxt.stroke();
            cxt.closePath();
            //画中点
            cxt.beginPath();
            cxt.arc(40,40,1,0,2*Math.PI);
            cxt.lineWidth = 2;
            cxt.color = 'red';
            cxt.stroke();
            cxt.closePath();
            //画刻度
            for(var i = 0;i < 60;i++) {
                //保存并新建画布

                cxt.beginPath();
                cxt.save();
                cxt.translate(40,40);
                cxt.rotate(i*6*Math.PI/180);
                if(i%5 == 0){
                    cxt.moveTo(28,0);
                }else{
                    cxt.moveTo(30,0);
                }
                cxt.lineTo(35,0);
                if(i%15 == 0){
                    cxt.lineWidth = 2;
                }else{
                    cxt.lineWidth = 1;
                }
                //cxt.lineWidth = 1;
                cxt.color = 'blue';
                cxt.stroke();
                cxt.restore();
                cxt.closePath();
            }

            //获取当前时间
            var t = new Date();
            var sec = t.getSeconds();
            var min = t.getMinutes() + sec / 60;
            var hou = t.getHours() + min / 60;

            //画指针
            //时针
            cxt.beginPath();
            cxt.save();
            cxt.translate(40,40);
            cxt.rotate((hou * 30 - 90) * Math.PI/180);
            cxt.moveTo(-5,0);
            cxt.lineTo(16,0);
            cxt.lineWidth = 2;
            cxt.color = 'blue';
            cxt.stroke();
            cxt.restore();
            cxt.closePath();

            //fen针
            cxt.beginPath();
            cxt.save();
            cxt.translate(40,40);
            cxt.rotate((min * 6 - 90) * Math.PI/180);
            cxt.moveTo(-5,0);
            cxt.lineTo(21,0);
            cxt.lineWidth = 2;
            cxt.color = 'blue';
            cxt.stroke();
            cxt.restore();
            cxt.closePath();

            //miao针
            cxt.beginPath();
            cxt.save();
            cxt.translate(40,40);
            cxt.rotate((sec * 6 - 90) * Math.PI/180);
            cxt.moveTo(-5,0);
            cxt.lineTo(27,0);
            cxt.lineWidth = 1;
            cxt.color = 'blue';
            cxt.stroke();
            cxt.restore();
            cxt.closePath();
        }
        clock();
        setInterval(clock,1000);

        //跟随鼠标移动
        var div = document.getElementsByTagName('div')[0];
        //console.log(div);
        div.onmousedown = function () {
            window.onmousemove = function (e) {
                var x = e.pageX;
                var y = e.pageY;
                div.style.top = y-40 + 'px';
                div.style.left = x-50 + 'px';
            }
        }


        //回家
        div.onmouseup = function () {
            window.onmousemove = null;
            var top = parseInt(div.style.top);
            var left = parseInt(div.style.left);
            if(top != 0 || left != 0){
               var n = top > left ? top : left;
               var tt =  setInterval(function(){
                   if(top > left){
                       top--;
                       left = left - left/top ;
                   }else{
                       left--;
                       top = top - top/left ;
                   }
                   div.style.top =  top + 'px';
                   div.style.left =  left + 'px';
                   if(top == 0 || left == 0){
                       clearInterval(tt);
                   }
                },1);
            }
        }
    </script>
</body>
</html>